<template>
    <div id="main-dialog" class="flex-center">
        <div v-if="!shadeInfo.isDownloading">
            <authorization v-if="shadeInfo.authCode==='1'" v-on:getCode="getCode" :bookId="bookId"></authorization>
            <get-code v-if="shadeInfo.authCode==='2'" v-on:getCode="getCode"></get-code>
        </div>
        <div class="down" v-if="shadeInfo.isDownloading">
            <download :downloadStatus="shadeInfo.downloadStatus" :lessonId="lessonId"></download>
        </div>
    </div>
</template>

<script>
import authorization from './authorization'
import getCode from './GetCode'
import download from './download'
export default {
    components: { authorization, getCode, download },
    props: ['shadeInfo', 'lessonId', "bookId"],
    data () {
        return {
            showsyncDownload:false,
        }
    },
    methods: {
        getCode (val) {
            this.shadeInfo.authCode = val;
        }
    },
    mounted(){
    }
}
</script>

<style lang="scss">
#main-dialog {
    width: 100%;
    // height: calc(100vh - 155px);
    position: absolute;
    background-image: url(./img/download-mask.png);
    background-size: cover;
    z-index: 19;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    .down {
        width: 100%;
        position: absolute;
        bottom: -2px;
    }
}
</style>
